{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/title.css">
<style type="text/css">
	body{
		background-color: #f3f3f3;
	}
	/*#canvas{
		position: absolute;
		top:0;
		width: 100%;
		height: 8.9rem;
		background-size: 100% 8.9rem;
		background-repeat: no-repeat;
	}*/
</style>
{/block}
{block name="content"}
<div class="title_headbox" id='main'>
	<img  class="blur" src="/Public/Images/front/front_img/cxq_xuangmu_pic3x.png" ><!--背景图片，根据头像变化-->
	
	
	<!-- <canvas id='canvas' ></canvas>  --> 

	<img class="others_personal_head" src="/Public/Images/front/front_img/cxq_xuangmu_pic3x.png"></img><!--个人头像-->
	<!--男女标志-->
	<!-- <div class="icon_gender_man"></div> -->
	<div class="icon_gender_male"></div>

	<div class="others_info_icon">
		<div class="point"></div><!--有消息时显示这个红点-->	
	</div>

	<p1>花花是世界</p1><!--昵称-->
</div>
<div class="wear_title">
	<i class="icon_title_small wore_title"></i>
	佩戴头衔
</div>
<div class="title_box">
<p class="no_wear" style="line-height:2.85rem">您还没有佩戴任何头衔，最多可佩戴6个哦</p>
<!-- <span class="wear_tag">特殊头衔</span>
<span class="wear_tag">特殊头衔</span>
<span class="wear_tag">分享者中级</span>
<span class="wear_tag">特殊头衔</span>
<span class="wear_tag">特殊头衔</span>
<span class="wear_tag">特殊头衔</span> -->
</div>
<div class="my_title">
	<i class="mytitle"></i>
	我的头衔<span class="remind">(点击头衔可以佩戴)</span>
</div>

<div class="title_box_2">
<!-- <p>您还没有领取任何头衔哦</p> -->
<span class="can_wear wear">分享者中级</span>
<span class="can_wear wear">水贴中级</span>
<span class="can_wear wear">特殊头衔</span>
<span class="can_wear wear">女神认定</span>
<span class="can_wear wear">鉴定师</span>
<span class="can_wear wear">萌妹认定</span>
<span class="can_wear wear">高级人员</span>
<span class="can_wear wear">大神认定</span>


</div>

<ul class="get_title_list">
	<li class="get_title">
		<img class="title_icon" src="/Public/Images/front/front_img/icon_tie@3x.png">
		<span class="title_name">初级头衔-水贴</span>
		<span class="get_bt" style="display:none">去领取</span>
		<span class="got_bt">已领取</span>
	</li>

	<li class="get_title">
		<img class="title_icon" src="/Public/Images/front/front_img/icon_tie@3x.png">
		<span class="title_name">初级头衔-水贴</span>
		<span class="get_bt" style="display:none">去领取</span>
		<span class="got_bt">已领取</span>
	</li>

	<li class="get_title">
		<img class="title_icon" src="/Public/Images/front/front_img/icon_tie@3x.png">
		<span class="title_name">初级头衔-水贴</span>
		<span class="get_bt" style="display:none">去领取</span>
		<span class="got_bt">已领取</span>
	</li>
</ul>

<div class="special_title">
	<img class="title_icon" src="/Public/Images/front/front_img/icon_teshu@3x.png">
	<span class="title_name">特殊头衔申请</span>
	<span class="goto_apply">去申请</span>
</div>
<!-- {include file="../Index/nav.html"} -->
{/block}
{block name="js"}
<!-- <script type="text/javascript" src="__PUBLIC__/Js/front/front_js/stackblur.js"></script>
 -->
 {literal}

<script type="text/javascript">
	// function Blur(){  
          
 //        stackBlurImage( 'BgImg', 'canvas', 18,'main' );  
	// }
	// Blur(); 
	// $('.get_title').on('click','.got_bt',function(){
	// 	$(this).hide().siblings('.get_bt').show();
	// });
	// $('.get_title').on('click','.get_bt',function(){
	// 	$(this).hide().siblings('.got_bt').show();
	// });

	$('ul li:eq(0)').on('click',function(){
		console.log(1);
		window.location.href = '/Index/get_title'
	});
	$('ul li:eq(1)').on('click',function(){
		console.log(2);
	});
	$('ul li:eq(2)').on('click',function(){
		console.log(3);
	});
	$('.goto_apply').on('click',function(){
		console.log(4);
	});
	$('.title_box_2').on('click','.can_wear',function(){
		if($(this).hasClass('wear')){
		// $('p').remove('.no_wear');
			$('.no_wear').hide();
			 var title=$(this).text();
			 console.log(22);
			$('.title_box').append('<span class="wear_tag" >'+title+'</span>');
			$(this).removeClass('wear');
			$(this).addClass('grey');
			console.log($(this).attr("class"));
			var length=$('.title_box').children('span').length;
			console.log(length);
			if(length>=6){
				$('.can_wear.wear').removeClass('wear').addClass('full');
			}
		}else

		if($(this).hasClass('grey')){
			var title=$(this).text();
		console.log(title);
		$(this).removeClass('grey');
		$(this).addClass('wear');
		$('.title_box span:contains('+title+')').remove();
		var length=$('.title_box').children('span').length;
		if(length<6){
			$('.can_wear.full').removeClass('full').addClass('wear');
		}
		if(length==0){
			$('.no_wear').show();
		}
		}
	});
	// $('.title_box_2').on('click',".can_wear.grey",function(){
	// 	var title=$(this).text();
	// 	console.log(title);
	// 	$(this).removeClass('grey');
	// 	$(this).addClass('wear');
	// 	$('.title_box span:contains('+title+')').remove();
	// 	var length=$('.title_box').children('span').length;
	// 	if(length<6){
	// 		$('.can_wear.full').removeClass('full').addClass('wear');
	// 	}
	// 	if(length==0){
	// 		$('.no_wear').show();
	// 	}
	// });
</script>
{/literal}
{/block}
